<template>
  <div class="container">
    <div class="app-container" style="padding: 20px;">
      <el-row>
        <el-button type="primary" size="mini" style="border-radius: 5px">增加停车计费规则</el-button>
      </el-row>
      <el-table :data="list">
        <el-table-column label="序号" type="index" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上限(元)" prop="chargeCeiling" />
        <el-table-column label="计费方式" prop="chargeType" />
        <el-table-column label="计费规则" prop="ruleNameView" />
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="mini">编辑</el-button>
            <el-button type="text" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          layout="prev, pager, next , jumper , total"
          :total="add.total"
          :page-size="add.pageSize"
          :current-page="add.page"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>
<script>
import { getAccountingAPI } from '@/apis/rule'

export default {
  name: 'Attendance',
  data() {
    return {
      list: [],
      add: {
        total: 0,
        name: '',
        pageSize: 10,
        page: 1
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const { rows, total } = await getAccountingAPI(this.add)
      this.list = rows
      this.add.total = total
    },
    changePage(changePage) {
      this.add.page = changePage
      this.getList()
    }
  }
}
</script>
